<template>
  <div class="mc_pan">
    <div class="close" @click="close">
      <a-icon type="close" />
    </div>
    <div class="mc_box">
      <a-table
        :scroll="{ x: 1950}"
        @change="getddgl"
        :columns="columns"
        :pagination="pagination"
        :data-source="tabslist"
      >
        <a slot="name" slot-scope="text">{{ text }}</a>
        <template slot-scope="text, record, index" slot="expandedRowRender">
          <div class="div">
            <div class="ddxxlist ddxxhead">
              <span class="listspan">型号</span>
              <span class="listspan">品牌</span>
              <span class="listspan">收货地址</span>
              <span class="listspan">价格</span>
              <span class="listspan">数量</span>
              <span class="listspan">合计</span>
            </div>
            <div class="ddxxlist dxbody" v-for="(item,i) in text.child" :key="i">
              <span class="listspan" :class="'xhval_'+i">{{item.XL}}</span>
              <span class="listspan" :class="'ppval_'+i">{{item.SCCJC}}</span>
              <span class="listspan">{{item.SZQY}}</span>
              <span class="listspan">
                <span>
                  <span class="orange">
                    ￥
                    <span :class="'moninpflg_'+item.key">{{item.HSJ}}</span>
                  </span>
                  /{{item.JLDW}}
                </span>
              </span>
              <span class="listspan">X{{item.DHSL}}</span>
              <span class="listspan">
                小计：
                <span class="orange red">
                  ￥
                  <span :class="'hjmon_'+item.key">{{item.HSJ*item.DHSL}}</span>
                </span>
              </span>
            </div>
          </div>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script>
const columns = [
  { title: "销售单编号", dataIndex: "SQDHDH", key: "SQDHDH" },
  { title: "公司名称", dataIndex: "dhdwmc", key: "dhdwmc" },
  { title: " 订货人", dataIndex: "DHR", key: "DHR" },
  { title: "总数量", dataIndex: "DHSL", key: "DHSL" },
  { title: "总金额", dataIndex: "zje", key: "zje" },
  { title: "订购日期", dataIndex: "ZDRQ", key: "ZDRQ" },
  {
    title: "订单状态",
    dataIndex: "SHBJB",
    key: "SHBJB",
    scopedSlots: { customRender: "SHBJB" }
  },
  { title: "收款日期", dataIndex: "fkrq", key: "fkrq" },
  { title: "收款方式", dataIndex: "SKFS", key: "SKFS" },
  { title: "收款金额", dataIndex: "FPSL", key: "FPSL" },
  { title: "来源", dataIndex: "ly", key: "ly" },
  { title: "运输方式", dataIndex: "YUNSHUFS", key: "YUNSHUFS" },
  {
    title: "运单号",
    dataIndex: "YUNSHUDH",
    key: "YUNSHUDH",
    scopedSlots: { customRender: "YUNSHUDH" }
  },
  { title: "发货日期", dataIndex: "fhrq", key: "fhrq" }
];

const data = [
  {
    key: "1",
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park, New York No. 1 Lake Park",
    tags: ["nice", "developer"]
  },
  {
    key: "2",
    name: "Jim Green",
    age: 42,
    address: "London No. 2 Lake Park, London No. 2 Lake Park",
    tags: ["loser"]
  },
  {
    key: "3",
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park, Sidney No. 1 Lake Park",
    tags: ["cool", "teacher"]
  }
];
import qs from "qs";
export default {
  data() {
    return {
      data,
      tabslist: [],
      columns,
      pagination: {
        defaultPageSize: 10,
        showTotal: total => `共 ${total} 条数据`,
        total: 0,
        current: 1
      },
      page: 1
    };
  },

  methods: {
    //获取列表
    getddgl(pagination) {
      console.log(this.$parent.mcval);
      this.pagination.current = pagination.current;
      this.axios
        .post(
          "set/statisticsListDetails.php ",
          qs.stringify({
            // shbjb: this.tabskey,
            // filed: this.serchvalue,
            page: this.pagination.current,
            pageSize: pagination.defaultPageSize,
            timeFiled: "",

            sqdwid: this.$parent.mcval.sqdwid,
            agentProvice: this.$parent.mcval.agentProvice,
            agentCity: this.$parent.mcval.agentCity,
            agentDistrict: this.$parent.mcval.agentDistrict
            // startTime: this.startTime,
            // endTime: this.endTime,
            // dhr: this.dhr,
            // dhdwmc: this.dhdwmc
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.tabslist = res.data.result.data[0].orderDetails;
            // this.pagination.total = Number(res.data.totalNum);

            for (var i = 0; i < this.tabslist.length; i++) {
              this.tabslist[i].key = i;
            }
            // this.nulldata = "";
          } else {
            this.tabslist = [];
            // this.nulldata = "无数据...";
          }
        });
    },
    close() {
      console.log(this.$parent.mcflag);
      this.$parent.mcflag = false;
    }
  },

  created() {
    this.getddgl(this.pagination);
  }
};
</script>

<style lang='less'>
.mc_pan {
  width: 97%;
  height: auto;
  box-shadow: 0px 0px 7px #ccc;
  background-color: #fff;
  margin: 9px auto;
  position: relative;
  top: 63px;
  text-align: left;
  padding: 50px 10px;
  .ddxxhead {
  border-bottom: 1px solid #ccc;
  .listspan {
    // color: #bababa;
  }
}
.ddxxlist {
  display: flex;
  justify-content: space-between;
  width: 70%;
  padding: 10px;
  .listspan {
    // display: flex;
    // justify-content: space-between;
    width: 20%;
    .anticon svg {
      font-size: 18px;
    }
  }
  .rightspan {
    width: 10%;
    text-align: right;
  }
  span {
    button {
      margin: 0 10px;
    }
    .button {
      background-color: #1890ff;
      border: 0 !important;
    }
  }
  .orange {
    color: red;
    .input {
      outline: none;
      border: 0;
      border: 1px solid #ccc;
      border-radius: 5px;
      padding: 3px 8px;
    }
  }
  .red {
    font-size: 14px;
  }
}
}

</style>
